<template>
	<view class="container">
		<view class="page-body">
			<!-- 计划数据框 -->
			<view class="page-section">
				<view class="title-box">
					<text>每日饮食计划</text>
				</view>

				<view class="plan-body">
					<view class="plan-content">
						<block v-for="(item,index) in plan" :key="index">
							<view class="text-box">
								{{item.txt}}
							</view>
							<view class="plan-item">
								<view class="slider-box">
									<slider class="slider-light" @changing="sliderChanging" value="item.dw" />
								</view>
								<view class="value-box">
									<text>{{item.value}}{{item.unit}}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>

			<!-- 按钮框 -->
			<view class="page-section">
				<view class="button-body" id="button1">
					<button plain="true">导入推荐</button>
					<button plain="true">重新评估</button>
				</view>
				<view class="button-body" id="button2">
					<button plain="true">保存修改</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				plan: [{
						txt: "设置消耗热量",
						min: 1000,
						max: 2000,
						value: 1500,
						unit: "千卡",
						dw: 50,
					},
					{
						txt: "设置目标步数",
						min: 0,
						max: 40000,
						value: 10000,
						unit: "步",
						dw: 50,
					},

				],
				cnt: 2,
			}
		},
		onLoad() {
			for (let i = 0; i < this.data.cnt; ++i) {
				let item = this.data.plan[i];
				let dw = (item.value - item.min) / (item.max - item.min) * 100;
				let init = "plan[" + i + "].dw";
				this.setData({
					[init]: dw,
				})
			}
		},
	}
</script>

<style>
	@import './sportsPlan.css'
</style>
